<template>
    <div>
        <table class="table table-sm table-bordered">
            <thead>
                <tr>
                    <th scope="col" class="text-center" :rowspan="item.rowspan" 
                    :colspan="item.colspan" v-for="(item, index) in table_ths" :key="index"
                    style="vertical-align:middle" :width="item.width"
                    >{{item.name}}</th>
                </tr>
                <tr>
                    <th scope="col" class="text-center"
                    v-for="(item, index) in skuLabels" :key="index"
                    >{{item.name}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item1, index2) in list" :key="index2">
                    <th scope="row" class="text-center"
                    v-for="(item2, index2) in item1.skus" :key="index2">{{item2.name}}</th>
                    <td class="text-center">
                        <div class="btn btn-light border" v-if="!item1.image">
                            <i class="el-icon-plus" @click="choose(item1)"></i>
                        </div>
                        <img v-else :src="item1.image" class="rounded" style="width:35px;height:35px;cursor:pointer" @click="choose(item1)">
                    </td>
                    <td>
                        <input type="number" v-model="item1.pprice" class="form-control text-center">
                    </td>
                    <td>
                        <input type="number" v-model="item1.oprice" class="form-control text-center">
                    </td>
                    <td>
                        <input type="number" v-model="item1.cprice" class="form-control text-center">
                    </td>
                    <td>
                        <input type="number" v-model="item1.stock" class="form-control text-center">
                    </td>
                    <td>
                        <input type="number" v-model="item1.volume" class="form-control text-center">
                    </td>
                    <td>
                        <input type="number" v-model="item1.weight" class="form-control text-center">
                    </td>
                    <td>
                        <input type="text" v-model="item1.code" class="form-control text-center">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
import {mapGetters, mapState} from 'vuex';
export default {
   data() {
      return {
          list: []
      }
   },
   components: {
   },
   props: {
   },
   created(){
       this.list = this.tableData
   },
   computed:{
     ...mapGetters(['table_ths', 'tableData', 'skuLabels']),
    // vuex分模块中的state记住要通过对象形式才能访问
     ...mapState({
         sku_card: state => state.goods_create.sku_card
     })
   },
   // 如果tableData有变化，则将新值赋给list
   watch:{
       tableData(newValue, oldValue) {
           this.list = newValue
       }
   },
   inject:['app'],
   methods:{
       choose(item1) {
        // 此处直接修改list中的数据 与sku-card-children中通过调用updateSkuValue方法不同
        // 两种方式都可以修改list数据？暂时不清楚原理
           this.app.show(res => {
               item1.image = res[0].url
           })
       }
   },
}
</script>
<style lang="less" scoped>

</style>
